<script setup>
import { ref, reactive, computed } from 'vue'

// 响应式数据区
const userName = ref('')
const userAge = ref('')
const techDirection = ref('前端')
const skills = reactive({
  HTML: false,
  CSS: false,
  JavaScript: false,
  Vue: false,
  Node: false
})

// 计算属性区
const isValidAge = computed(() => {
  const age = parseInt(userAge.value)
  return age >= 18 && age <= 100
})

const selectedSkillsCount = computed(() => {
  return Object.values(skills).filter(skill => skill).length
})

const userStatus = computed(() => {
  if (userName.value === '' && userAge.value === '' &&
      !Object.values(skills).some(skill => skill)) {
    return '新用户'
  } else if (parseInt(userAge.value) >= 35 && selectedSkillsCount.value >= 3) {
    return '资深开发者'
  } else {
    return '潜力开发者'
  }
})

const cardTheme = computed(() => {
  const themes = {
    '前端': '#4CAF50',
    '后端': '#2196F3',
    '全栈': '#9C27B0'
  }
  return { backgroundColor: themes[techDirection.value] || '#4CAF50' }
})
</script>

<template>
  <div class="container">
    <!-- 输入表单区 -->
    <div class="form-section">
      <div>
        <label>姓名：</label>
        <input type="text" v-model="userName">
        <span v-if="userName.length > 0 && userName.length < 2" class="error">
          姓名至少需要2个字符
        </span>
      </div>

      <div>
        <label>年龄：</label>
        <input type="number" v-model.number="userAge">
        <span v-if="userAge && (!isValidAge)" class="error">
          年龄必须在18-100岁之间
        </span>
      </div>

      <div>
        <label>技术方向：</label>
        <select v-model="techDirection">
          <option value="前端">前端</option>
          <option value="后端">后端</option>
          <option value="全栈">全栈</option>
        </select>
      </div>

      <div>
        <label>技能标签：</label>
        <div class="skills">
          <label v-for="(value, key) in skills" :key="key">
            <input type="checkbox" v-model="skills[key]">
            {{ key }}
          </label>
        </div>
      </div>
    </div>

    <!-- 信息展示区 -->
    <div class="info-card" :style="cardTheme">
      <h2>{{ userName || '未命名用户' }}</h2>

      <div class="info-item">
        <strong>年龄:</strong>
        <span v-if="userAge">{{ userAge }}岁</span>
        <span v-else>未提供</span>
      </div>

      <div class="info-item">
        <strong>技术方向:</strong> {{ techDirection }}
      </div>

      <div class="info-item">
        <strong>技能数量:</strong> {{ selectedSkillsCount }}/{{ Object.keys(skills).length }}
      </div>

      <div class="status-tag" :class="userStatus">
        {{ userStatus }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.form-section {
  background: #f5f5f5;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.form-section div {
  margin-bottom: 1rem;
}

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.skills label {
  min-width: 80px;
}

.info-card {
  padding: 2rem;
  border-radius: 8px;
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.info-card h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.info-item {
  margin-bottom: 1rem;
}

.status-tag {
  margin-top: 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: bold;
  display: inline-block;
}

.status-tag.新用户 {
  background-color: #9e9e9e;
}

.status-tag.资深开发者 {
  background-color: #ff9800;
}

.status-tag.潜力开发者 {
  background-color: #2196f3;
}

.error {
  color: red;
  margin-left: 1rem;
}
</style>
